<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Products Admin</title>
</head>
<body>
    <h1>Products Admin</h1>

    <h2>Add Product</h2>
    <form action="/products" method="post">
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"><br>
        <label for="description">Description:</label><br>
        <textarea id="description" name="description"></textarea><br>
        <label for="price">Price:</label><br>
        <input type="number" id="price" name="price"><br><br>
        <button type="submit">Add Product</button>
    </form>

    <h2>Delete Product</h2>
    <form id="deleteForm">
        <label for="deleteId">Product ID to delete:</label><br>
        <input type="number" id="deleteId" name="deleteId"><br><br>
        <button type="button" onclick="deleteProduct()">Delete Product</button>
    </form>

    <h2>Update Product</h2>
    <form action="/products/{product_id}" method="put" id="updateForm">
        <label for="updateId">Product ID to update:</label><br>
        <input type="number" id="updateId" name="updateId"><br>
        <label for="updateName">New Name:</label><br>
        <input type="text" id="updateName" name="updateName"><br>
        <label for="updateDescription">New Description:</label><br>
        <textarea id="updateDescription" name="updateDescription"></textarea><br>
        <label for="updatePrice">New Price:</label><br>
        <input type="number" id="updatePrice" name="updatePrice"><br><br>
        <button type="button" onclick="updateProduct()">Update Product</button>
    </form>

    <h2>Get All Products</h2>
    <button onclick="getAllProducts()">Get All Products</button>
    <div id="allProducts"></div>

    <script>
        async function deleteProduct() {
            const productId = document.getElementById("deleteId").value;
            const response = await fetch(`/products/${productId}`, {
                method: 'DELETE',
            });
            const data = await response.json();
            alert(data.msg);
        }

        async function updateProduct() {
            const productId = document.getElementById("updateId").value;
            const name = document.getElementById("updateName").value;
            const description = document.getElementById("updateDescription").value;
            const price = document.getElementById("updatePrice").value;
            const payload = {
                name: name,
                description: description,
                price: price
            };
            const response = await fetch(`/products/${productId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(payload)
            });
            const data = await response.json();
            alert(data.msg);
        }

        async function getAllProducts() {
            const response = await fetch(`/products/all`);
            const data = await response.json();
            let html = '<ul>';
            data.data.forEach(product => {
                html += `<li>${product.name} - ${product.description} - $${product.price}</li>`;
            });
            html += '</ul>';
            document.getElementById("allProducts").innerHTML = html;
        }
    </script>
</body>
</html>
